<template>
    <div>
        <div class="app-container">
            <div style="font-size: 18px;font-weight: 700;color: black">基础信息</div>
           <el-row >
               <el-col :span="11" :xs="24"  style="margin-top: 30px">
                   <div style="display: flex">
                       <div style="font-weight: 700;color: black">信息点名称</div>
                       <div style="margin-left: 20px">{{formData.sensorName}}</div>
                   </div>
               </el-col>
               <el-col :span="11" :xs="24"  style="margin-top: 30px">
                   <div style="display: flex">
                       <div style="font-weight: 700;color: black">站号</div>
                       <div style="margin-left: 20px">{{formData.siteNumber}}</div>
                   </div>
               </el-col>
               <el-col :span="11" style="margin-top: 30px" :xs="24">
                   <div style="display: flex">
                       <div style="font-weight: 700;color: black">数据位置</div>
                       <div style="margin-left: 20px">{{formData.position}}</div>
                   </div>
               </el-col>
               <el-col :span="11" style="margin-top: 30px" :xs="24">
                   <div style="display: flex">
                       <div style="font-weight: 700;color: black">当前数值</div>
                       <div style="margin-left: 20px">{{formData.sensorValue}}</div>
                   </div>
               </el-col>
           </el-row>
        </div>
        <el-divider></el-divider>
        <div style="display: flex;align-items: center">
            <div style="font-size: 18px;font-weight: 700;color: black" class="app-container">历史数据</div>
            <div>
                <el-button @click="handleExport">
                    导出
                </el-button>
            </div>
        </div>
        <el-form ref="form" :model="form" label-width="85px" size="small">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="时间范围" prop="beginTime">
                        <el-date-picker
                            v-model="form.time"
                            type="daterange"
                            align="right"
                            unlink-panels
                            value-format="timestamp"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            @change="changeData"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="是否缩放">
                <el-radio v-model="form.resource" label="slider" @input="getSensorSingleData">是</el-radio>
                <el-radio v-model="form.resource" label="inside" @input="getSensorSingleData">否</el-radio>
            </el-form-item>
        </el-form>
        <div class="chart-wrapper">
            <LineChart title="历史数据" :chart-data="chartData" :xAxisData="echartsX" :is-slider="form.resource" :key="num"/>
        </div>
    </div>
</template>

<script>
import LineChart from '@/views/common/chart/LineChart'
import { getSensorHistorySingleData } from '@/api/biz/sensorHistoryData'
import { sumbitTask } from '@/api/excel/excelExportTask'

export default {
    components: { LineChart },
    props: {
        formData: {
            type: Object,
            default: () => {
            }
        },
        isEdit: {
            type: Boolean,
            default:false
        },
    },
    name: 'index',
    data() {
        return {
            // 表单参数
            form: {
                resource: 'slider',
                time:[new Date().getTime(),new Date().getTime()]
            },
            // 信息点id:
            sensorId:0,
            num:0,
            chartData: [
                {
                    name: '',
                    data: []
                }
            ],
            echartsX: [],
            pickerOptions: {
                shortcuts: [{
                    text: '今日',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        picker.$emit('pick', [start.getTime(), end.getTime()])
                    }
                }, {
                    text: '最近三天',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            }
        }
    },
    methods: {
        // 获取曲线数据
        getSensorSingleData() {
            let obj ={
                sensorId:this.sensorId,
                beginTime:this.form.time[0],
                endTime:this.form.time[1]
            }
            getSensorHistorySingleData(obj).then(res=>{
                console.log('历史数据',res)
                this.chartData[0].name = res.data.sensorName
                if(res.data.echartsX.length>0){
                    this.echartsX = res.data.echartsX
                    this.chartData[0].data = res.data.data
                }else {
                    this.echartsX = [
                        '2020-10-01 10:00:00',
                        '2020-10-01 10:15:00',
                        '2020-10-01 10:30:00',
                        '2020-10-01 10:45:00',
                        '2020-10-01 11:00:00',
                        '2020-10-01 11:15:00',
                        '2020-10-01 11:30:00',
                        '2020-10-01 11:45:00',
                        '2020-10-01 12:00:00',
                        '2020-10-01 12:15:00'
                    ]
                    this.chartData = [
                        {
                            name: '模拟数据',
                            data: [
                                5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                            ]
                        }
                    ]
                }
                this.num++
            })
        },
        changeData() {
            this.getSensorSingleData()
        },
        // 导出excel任务
        handleExport() {
            let obj ={
                taskType:'0',
                taskParam:{
                    beginTime:this.form.time[0],
                    endTime:this.form.time[1],
                    sensorId:this.sensorId,
                }
            }
            sumbitTask(obj).then(res=>{
                if(res.data){
                    this.$router.push('/task/excel-export')
                }
            })
        }
    },
    watch: {
        formData:{
            handler(newVal,oldVal){
                // console.log(newVal)
                this.sensorId = newVal.sensorId
                if(!this.isEdit){
                    this.getSensorSingleData()
                }
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>

</style>
